<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用帮助 - 智能CRUD代码生成器</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Prism.js for code highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet">
    <!-- Common CSS -->
    <link href="/css/common.css" rel="stylesheet">
    
    <style>
        .help-section {
            margin-bottom: 3rem;
        }
        
        .step-number {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
        }
        
        .code-example {
            background-color: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 1rem;
            margin: 1rem 0;
        }
        
        .feature-highlight {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem;
            border-radius: 10px;
            margin-bottom: 1rem;
        }
        
        .warning-box {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 1rem;
            margin: 1rem 0;
        }
        
        .success-box {
            background-color: #d1edff;
            border: 1px solid #74b9ff;
            border-radius: 5px;
            padding: 1rem;
            margin: 1rem 0;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div th:replace="fragments/navigation :: navbar"></div>

    <div class="container my-5">
        <!-- 页面标题 -->
        <div class="text-center mb-5">
            <h1 class="display-5">
                <i class="fas fa-question-circle text-primary me-3"></i>
                使用帮助
            </h1>
            <p class="lead text-muted">详细的使用指南，帮助您快速上手智能CRUD代码生成器</p>
        </div>

        <!-- 快速开始 -->
        <section class="help-section">
            <h2 class="mb-4">
                <i class="fas fa-rocket text-success me-2"></i>
                快速开始
            </h2>
            
            <div class="row">
                <div class="col-lg-8">
                    <div class="d-flex align-items-start mb-4">
                        <div class="step-number">1</div>
                        <div>
                            <h5>准备SQL DDL语句</h5>
                            <p class="text-muted">编写或准备一个CREATE TABLE语句，确保语法正确。</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-start mb-4">
                        <div class="step-number">2</div>
                        <div>
                            <h5>访问生成器页面</h5>
                            <p class="text-muted">打开浏览器访问 <code>http://localhost:8080/generator-enhanced</code></p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-start mb-4">
                        <div class="step-number">3</div>
                        <div>
                            <h5>输入SQL语句</h5>
                            <p class="text-muted">在文本框中粘贴您的CREATE TABLE语句。</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-start mb-4">
                        <div class="step-number">4</div>
                        <div>
                            <h5>预览和生成</h5>
                            <p class="text-muted">点击"预览代码"查看生成效果，确认无误后点击"生成代码"。</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-start mb-4">
                        <div class="step-number">5</div>
                        <div>
                            <h5>下载代码</h5>
                            <p class="text-muted">点击"下载代码"获取完整的代码文件包。</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="feature-highlight">
                        <h5><i class="fas fa-lightbulb me-2"></i>小贴士</h5>
                        <ul class="mb-0">
                            <li>支持MySQL语法</li>
                            <li>建议添加表注释和字段注释</li>
                            <li>确保主键字段设置正确</li>
                            <li>可以预览代码再决定是否生成</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- SQL语法支持 -->
        <section class="help-section">
            <h2 class="mb-4">
                <i class="fas fa-database text-info me-2"></i>
                支持的SQL语法
            </h2>
            
            <div class="row">
                <div class="col-lg-6">
                    <h5>数据类型支持</h5>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>MySQL类型</th>
                                    <th>Java类型</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>INT, INTEGER</td><td>Integer</td><td>整数类型</td></tr>
                                <tr><td>BIGINT</td><td>Long</td><td>长整数类型</td></tr>
                                <tr><td>VARCHAR</td><td>String</td><td>可变长字符串</td></tr>
                                <tr><td>TEXT</td><td>String</td><td>长文本类型</td></tr>
                                <tr><td>DATETIME</td><td>LocalDateTime</td><td>日期时间类型</td></tr>
                                <tr><td>DATE</td><td>LocalDate</td><td>日期类型</td></tr>
                                <tr><td>DECIMAL</td><td>BigDecimal</td><td>精确小数类型</td></tr>
                                <tr><td>BOOLEAN</td><td>Boolean</td><td>布尔类型</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <h5>约束条件支持</h5>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>PRIMARY KEY</strong> - 主键约束
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>NOT NULL</strong> - 非空约束
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>AUTO_INCREMENT</strong> - 自增长
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>DEFAULT</strong> - 默认值
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>COMMENT</strong> - 注释信息
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>UNIQUE</strong> - 唯一约束
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 示例代码 -->
        <section class="help-section">
            <h2 class="mb-4">
                <i class="fas fa-code text-warning me-2"></i>
                SQL示例
            </h2>
            
            <div class="row">
                <div class="col-lg-6">
                    <h5>简单示例</h5>
                    <div class="code-example">
                        <pre><code class="language-sql">CREATE TABLE user (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100),
    created_time DATETIME DEFAULT CURRENT_TIMESTAMP
) COMMENT '用户表';</code></pre>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <h5>复杂示例</h5>
                    <div class="code-example">
                        <pre><code class="language-sql">CREATE TABLE product (
    id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '商品ID',
    name VARCHAR(200) NOT NULL COMMENT '商品名称',
    price DECIMAL(10,2) NOT NULL COMMENT '商品价格',
    category_id BIGINT NOT NULL COMMENT '分类ID',
    description TEXT COMMENT '商品描述',
    status TINYINT DEFAULT 1 COMMENT '状态:1-上架,0-下架',
    stock_quantity INT DEFAULT 0 COMMENT '库存数量',
    created_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    updated_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) COMMENT '商品表';</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- 生成的代码结构 -->
        <section class="help-section">
            <h2 class="mb-4">
                <i class="fas fa-folder-open text-primary me-2"></i>
                生成的代码结构
            </h2>
            
            <div class="row">
                <div class="col-lg-8">
                    <h5>文件结构说明</h5>
                    <div class="code-example">
                        <pre><code>generated-code/
├── entity/
│   └── User.java              # MyBatis-Plus实体类
├── mapper/
│   └── UserMapper.java        # MyBatis-Plus Mapper接口
├── service/
│   └── UserService.java       # 业务逻辑层
└── controller/
    └── UserController.java    # REST控制器</code></pre>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>文件类型</th>
                                    <th>主要功能</th>
                                    <th>包含注解</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Entity</strong></td>
                                    <td>MyBatis-Plus实体类，映射数据库表</td>
                                    <td>@TableName, @TableId, @TableField</td>
                                </tr>
                                <tr>
                                    <td><strong>Mapper</strong></td>
                                    <td>数据访问接口，继承BaseMapper</td>
                                    <td>@Mapper</td>
                                </tr>
                                <tr>
                                    <td><strong>Service</strong></td>
                                    <td>业务逻辑层，包含CRUD操作</td>
                                    <td>@Service, @Transactional</td>
                                </tr>
                                <tr>
                                    <td><strong>Controller</strong></td>
                                    <td>REST API控制器</td>
                                    <td>@RestController, @RequestMapping</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="success-box">
                        <h6><i class="fas fa-star text-warning me-2"></i>代码特色</h6>
                        <ul class="mb-0">
                            <li>符合Spring Boot规范</li>
                            <li>完整的CRUD操作</li>
                            <li>RESTful API设计</li>
                            <li>Swagger文档注解</li>
                            <li>数据验证注解</li>
                            <li>事务管理支持</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- 常见问题 -->
        <section class="help-section">
            <h2 class="mb-4">
                <i class="fas fa-question-circle text-danger me-2"></i>
                常见问题
            </h2>
            
            <div class="accordion" id="faqAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faq1">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                            Q: 支持哪些数据库的SQL语法？
                        </button>
                    </h2>
                    <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            目前主要支持MySQL的CREATE TABLE语法。支持常见的数据类型、约束条件和注释。
                            未来版本将考虑支持PostgreSQL、Oracle等其他数据库。
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faq2">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                            Q: 生成的代码可以直接使用吗？
                        </button>
                    </h2>
                    <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            生成的代码是标准的Spring Boot代码，可以直接集成到项目中使用。
                            建议根据具体业务需求进行适当调整和扩展。
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faq3">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                            Q: 如何自定义生成的代码风格？
                        </button>
                    </h2>
                    <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            当前版本使用固定的代码模板。如需自定义，可以修改resources/templates目录下的FreeMarker模板文件。
                            未来版本将提供更灵活的配置选项。
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faq4">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
                            Q: 遇到SQL解析错误怎么办？
                        </button>
                    </h2>
                    <div id="collapse4" class accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            请检查SQL语法是否正确，确保：
                            <ul>
                                <li>使用标准的CREATE TABLE语法</li>
                                <li>字段类型拼写正确</li>
                                <li>括号和分号使用正确</li>
                                <li>避免使用过于复杂的约束条件</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faq5">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5">
                            Q: 生成的API接口包含哪些操作？
                        </button>
                    </h2>
                    <div id="collapse5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            生成的Controller包含完整的CRUD操作：
                            <ul>
                                <li>POST /api/{table} - 创建记录</li>
                                <li>GET /api/{table}/{id} - 根据ID查询</li>
                                <li>GET /api/{table} - 查询所有记录</li>
                                <li>GET /api/{table}/page - 分页查询</li>
                                <li>PUT /api/{table}/{id} - 更新记录</li>
                                <li>DELETE /api/{table}/{id} - 删除记录</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 注意事项 -->
        <section class="help-section">
            <h2 class="mb-4">
                <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                注意事项
            </h2>
            
            <div class="warning-box">
                <h6><i class="fas fa-info-circle me-2"></i>重要提醒</h6>
                <ul class="mb-0">
                    <li>生成代码前请先预览，确认无误后再生成</li>
                    <li>建议为表和字段添加注释，生成的代码会更完整</li>
                    <li>复杂的业务逻辑需要在生成代码基础上进行扩展</li>
                    <li>生成的代码仅包含基础CRUD操作，复杂查询需要自行添加</li>
                    <li>请确保数据库连接配置正确，以便代码正常运行</li>
                </ul>
            </div>
        </section>

        <!-- 技术支持 -->
        <section class="help-section">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">
                        <i class="fas fa-headset text-primary me-2"></i>
                        需要帮助？
                    </h5>
                    <p class="card-text">
                        如果您在使用过程中遇到问题，可以通过以下方式获取帮助：
                    </p>
                    <div class="row">
                        <div class="col-md-4">
                            <i class="fas fa-book text-info" style="font-size: 2rem;"></i>
                            <h6 class="mt-2">查看文档</h6>
                            <p class="text-muted">详细的API文档和使用说明</p>
                        </div>
                        <div class="col-md-4">
                            <i class="fab fa-github text-dark" style="font-size: 2rem;"></i>
                            <h6 class="mt-2">提交Issue</h6>
                            <p class="text-muted">在GitHub上提交问题反馈</p>
                        </div>
                        <div class="col-md-4">
                            <i class="fas fa-envelope text-success" style="font-size: 2rem;"></i>
                            <h6 class="mt-2">联系作者</h6>
                            <p class="text-muted">通过邮件联系项目作者</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-light py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p class="mb-0">
                        <i class="fas fa-code me-2"></i>
                        智能CRUD代码生成器 - 让开发更简单
                    </p>
                </div>
                <div class="col-md-6 text-end">
                    <p class="mb-0">
                        <i class="fas fa-question-circle me-1"></i>
                        有问题？查看帮助文档
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Prism.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-sql.min.js"></script>
</body>
</html>